<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">收费模板</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="收费名称">
						<el-input v-model="name" placeholder="请输入模板名称查询" clearable @change="sousuo()" style="width: 300px;"></el-input>
					</el-form-item>

					<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询</el-button></el-form-item>
					<el-form-item><el-button type="warning" @click="add(1)" icon="el-icon-circle-plus-outline">添加电动车桩模板</el-button></el-form-item>
					<el-form-item><el-button type="success" @click="add(2)" icon="el-icon-circle-plus-outline">添加气车桩模板</el-button></el-form-item>
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="name" label="模板名称"></el-table-column>
					<el-table-column label="模板类型">
						<template slot-scope="scope">
							<el-tag type="warning" v-if="scope.row.type == 1">电动车桩</el-tag>
							<el-tag type="success" v-if="scope.row.type == 2">汽车桩</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="createtime" label="创建时间"></el-table-column>

					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="add_edit(scope.row.id)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination
					background
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					:pager-count="pageCount"
					prev-text="上一页"
					next-text="下一页"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<el-dialog :title="form.id ? '修改电动车桩收费模板' : '添加电动车桩收费模板'" :visible.sync="dialogVisible" width="850px">
			<el-form ref="form" :model="form" label-width="120px" class="form">
				<el-form-item label="模板名称"><el-input style="width: 200px;" placeholder="请输入模板名称" v-model="form.name"></el-input></el-form-item>
				<el-form-item label="投币时长" ><el-input type="number" style="width: 200px;" v-model.number="form.coin_charging_time" placeholder="请输入投币对应时长"></el-input><span>（分钟）</span> </el-form-item>
				<div v-for="(template,index) in form.price" :key="index">
					<el-form-item :label="'阶段时间 ('+ (index + 1) + ')'">
					    <el-input type="number" v-model.number="template.hour" style="width: 200px;" placeholder="请输入阶段时间"></el-input><span>（小时）</span>
						<span class="title">阶段金额</span><el-input type="number" v-model.number="template.money" style="width: 200px;" placeholder="请输入阶段金额"></el-input><span>（元）</span> 
						<el-button type="warning" v-if="index == (form.price.length - 1)" icon="el-icon-plus" @click="addTemplateItem()" size="mini" circle></el-button>
						<el-button type="danger" v-if="index == (form.price.length - 1) && form.price.length > 1" icon="el-icon-delete" @click="delTemplateItem()" size="mini" circle></el-button>
					</el-form-item>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save()">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog :title="form.id ? '修改汽车桩收费模板' : '添加气车桩收费模板'" :fullscreen="true" :visible.sync="dialogVisible1" width="850px">
			<el-form ref="form" :inline="true"  :model="form" label-width="120px" class="form">
				<el-form-item label="模板名称"><el-input style="width: 200px;" placeholder="请输入模板名称" v-model="form.name"></el-input></el-form-item>
				<el-form-item label="尖费率" ><el-input type="number" style="width: 200px;" v-model.number="form.price.j_fl" placeholder="请输入金额"></el-input></el-form-item>
				<el-form-item label="峰费率" ><el-input type="number" style="width: 200px;" v-model.number="form.price.f_fl" placeholder="请输入金额"></el-input></el-form-item>
				<el-form-item label="平费率" ><el-input type="number" style="width: 200px;" v-model.number="form.price.p_fl" placeholder="请输入金额"></el-input></el-form-item>
				<el-form-item label="谷费率" ><el-input type="number" style="width: 200px;" v-model.number="form.price.g_fl" placeholder="请输入金额"></el-input></el-form-item>
				<el-form-item label="计损比例" ><el-input type="number" style="width: 200px;" v-model.number="form.price.jsbl" placeholder="请输入计损比例"></el-input><span>（%）</span> </el-form-item>
			</el-form>
			
			<el-form :inline="true" label-width="120px" style="margin-top: 20px;">
					<el-form-item :label="item.time" v-for="(item,index) in times" :key="index">
						 <el-select v-model="item.value" placeholder="请选择">
						   <el-option
							 v-for="item in typeList"
							 :key="item.id"
							 :label="item.name"
							 :value="item.id">
						   </el-option>
						 </el-select>
					</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="saveQc()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { query, add_edit, save  } from '@/api/charge-template';
export default {
	name: 'charge-template',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			setItem: {},
			name: '',
			form: {
				id:'',
				name: '',
				type: '',
				coin_charging_time:'',
				price:[]
			},
			times:[
				{time:'0:00~0:30',value:1},
				{time:'0:30~1:00',value:1},
				{time:'1:00~1:30',value:1},
				{time:'1:30~2:00',value:1},
				{time:'2:00~2:30',value:1},
				{time:'2:30~3:00',value:1},
				{time:'3:00~3:30',value:1},
				{time:'3:30~4:00',value:1},
				{time:'4:00~4:30',value:1},
				{time:'4:30~5:00',value:1},
				{time:'5:00~5:30',value:1},
				{time:'5:30~6:00',value:1},
				{time:'6:00~6:30',value:1},
				{time:'6:30~7:00',value:1},
				{time:'7:00~7:30',value:1},
				{time:'7:30~8:00',value:1},
				{time:'8:00~8:30',value:1},
				{time:'8:30~9:00',value:1},
				{time:'9:00~9:30',value:1},
				{time:'9:30~10:00',value:1},
				{time:'10:00~10:30',value:1},
				{time:'10:30~11:00',value:1},
				{time:'11:00~11:30',value:1},
				{time:'11:30~12:00',value:1},
				{time:'12:00~12:30',value:1},
				{time:'12:30~13:00',value:1},
				{time:'13:00~13:30',value:1},
				{time:'13:30~14:00',value:1},
				{time:'14:00~14:30',value:1},
				{time:'14:30~15:00',value:1},
				{time:'15:00~15:30',value:1},
				{time:'15:30~16:00',value:1},
				{time:'16:00~16:30',value:1},
				{time:'16:30~17:00',value:1},
				{time:'17:00~17:30',value:1},
				{time:'17:30~18:00',value:1},
				{time:'18:00~18:30',value:1},
				{time:'18:30~19:00',value:1},
				{time:'19:00~19:30',value:1},
				{time:'19:30~20:00',value:1},
				{time:'19:30~20:00',value:1},
				{time:'20:30~21:00',value:1},
				{time:'21:00~21:30',value:1},
				{time:'21:30~22:00',value:1},
				{time:'22:00~22:30',value:1},
				{time:'22:30~23:00',value:1},
				{time:'23:00~23:30',value:1},
				{time:'23:30~24:00',value:1},
			],
			typeList:[
				{id:1,name:'尖费率'},
				{id:2,name:'峰费率'},
				{id:3,name:'平费率'},
				{id:4,name:'谷费率'}
			],
			dialogVisible: false,
			dialogVisible1: false,
		};
	},
	computed: {},
	created() {
		this.getData();
	},
	methods: {
		addTemplateItem(){
			this.form.price.push({hour:'',money:''})
		},
		delTemplateItem(){
			this.form.price.splice(this.form.price.length - 1 ,1)
		},
	
 		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};
			if (this.name) {
				data['name'] = this.name;
			}
			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 修改回填
		add_edit(id) {
			add_edit({
				id: id
			}).then(res => {
				if (res.state) {
					if(res.data.type == 1) {
						if(res.data.other_setting){
							let other_setting = JSON.parse(res.data.other_setting)
							res.data.price = [...other_setting.price]
						}else{
							res.data.price = []
						}
						this.form = res.data
						this.dialogVisible = true
					}else if(res.data.type == 2) {
						if(res.data.other_setting){
							let other_setting = JSON.parse(res.data.other_setting)
							res.data.price = other_setting.price
							res.data.price.data.forEach((item,index) => {
								this.times[index].value = item
							})
						}else{
							res.data.price = []
						}
						this.form = res.data
						this.dialogVisible1 = true
					}
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		add(type) {
			this.form = {
				id:'',
				name: '',
				type:type,
				coin_charging_time:'',
				price:[]
			}
			if(type == 1) {
				this.form.price = [{hour:'',money:''}]
			}else if(type == 2) {
				this.form.price = {"f_fl":"","p_fl":"","j_fl":"","g_fl":"","jsbl":"","data":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}
			}
			console.log(this.form)
			if(type == 1) {
				this.dialogVisible = true
			}else if(type == 2) {
				this.dialogVisible1 = true
			}
		},
		// 添加修改
		save() {
			if(!this.form.name) {
				this.$message.error('请输入模板名称！');
				return
			}
			if(!this.form.coin_charging_time) {
				this.$message.error('请输入投币时长！');
				return
			}
			let is = true
			for (let i=0;i<this.form.price.length;i++) {
				let item = this.form.price[i]
				if(!item.hour) {
					this.$message.error('阶段时间不能为空！');
					is = false
					break;
				}else if(!item.money) {
					this.$message.error('阶段金额不能为空！');
					is = false
					break;
				}
			}
			if(!is) {
				return
			}
			let data = {}
			if(this.form.id) {
				data['template.id'] = this.form.id
			}
			data['template.name'] = this.form.name
			data['template.type'] = this.form.type
			data['template.coin_charging_time'] = this.form.coin_charging_time
			data['price'] = JSON.stringify(this.form.price)
			save(data).then(res => {
				if (res.state) {
					if(!this.form.id) {
						this.currentPage = 1;
					}
					this.getData()
					this.$message({
					  message: '提交成功',
					  type: 'success'
					});
					this.dialogVisible = false
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		// 添加修改汽车
		saveQc() {
			if(!this.form.name) {
				this.$message.error('请输入模板名称！');
				return
			}
			if(!this.form.price.j_fl) {
				this.$message.error('请输入尖费率！');
				return
			}
			if(!this.form.price.f_fl) {
				this.$message.error('请输入封费率！');
				return
			}
			if(!this.form.price.p_fl) {
				this.$message.error('请输入平费率！');
				return
			}
			if(!this.form.price.g_fl) {
				this.$message.error('请输入谷费率！');
				return
			}
			if(!this.form.price.jsbl) {
				this.$message.error('请输入计损比例！');
				return
			}
			this.form.price.data = []
			this.times.forEach(item => {
				this.form.price.data.push(item.value)
			})
			let data = {}
			if(this.form.id) {
				data['template.id'] = this.form.id
			}
			data['template.name'] = this.form.name
			data['template.type'] = this.form.type
			data['price'] = JSON.stringify(this.form.price)
			save(data).then(res => {
				if (res.state) {
					if(!this.form.id) {
						this.currentPage = 1;
					}
					this.getData()
					this.$message({
					  message: '提交成功',
					  type: 'success'
					});
					this.dialogVisible1 = false
				} else {
					this.$message.error(res.msg);
				}
			});
		},
	
		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		}
	}
};
</script>
<style lang="scss" scoped>
.form {
	.title{
		line-height: 36px;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		margin: 12px;
	}
}
</style>
